import '../../scss/use/window.scss'
import { Button, Form, Input, message } from 'antd';
import 'antd/dist/antd.min.css'
import axios from 'axios';
import { useContext } from 'react';
import ThemeContext from '../public/ThemContext';
import { useNavigate } from 'react-router-dom';

export default function ModifyPassw() {
    const navigate = useNavigate();

    const onFinish = (values: any) => {
        // console.log('Received values of form: ', values);
        //修改密码,根据用户id去后端对比原始密码是否正确
        let uid=sessionStorage.getItem('uid')
        axios.post('http://127.0.0.1:81/modfityPasswd', {
            params: { uid ,values}
        }).then((res: any) => {
            console.log(res);
            //原始密码有误
            if (res.data.code === 0) {
                alert(res.data.msg)
                //数据库更新操作失败
            } else if (res.data.code === -1) {
                alert(res.data.msg)
            } else {
                message.success(res.data.msg)
                //退出登录并跳转到登录页面
                //清除缓存
                sessionStorage.clear()
                //跳转到登录页面
                navigate({ pathname: '/login' })
            }
        }).catch(function (error: any) {
            console.log(error);
        });
    };

    let {operate}=useContext(ThemeContext);
    return (
        <div style={{display:(operate==='修改密码' ? 'block':'none')}}>
            <Form
                name="modifyP"
                onFinish={onFinish}
                scrollToFirstError
            >
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入你的原始密码',
                        },
                    ]}
                    hasFeedback
                >
                    <Input.Password size='large' placeholder="原始密码" maxLength={8} minLength={4} />
                </Form.Item>

                <Form.Item
                    name="newpassword"
                    rules={[
                        {
                            required: true,
                            message: '请输入你的新密码',
                        },
                    ]}
                    hasFeedback
                >
                    <Input.Password size='large' placeholder="新密码" maxLength={8} minLength={4} />
                </Form.Item>

                <Form.Item
                    name="confirm"
                    dependencies={['newpassword']}
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: '请再次确认你的密码',
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('newpassword') === value) {
                                    return Promise.resolve(console.log(getFieldValue('newpassword')));
                                }
                                return Promise.reject(new Error('请输入两次相同的密码!'));
                            },
                        }),
                    ]}
                >
                    <Input.Password size='large' placeholder="请再次输入密码" />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" block size='large' style={{ width: '400px' }}>
                        确定
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
